<template>
    <section class="lix-sh-shizhi-layout">
        <header class="layout-top-head">
            <el-button class="area-button">
                {{ areaName }}
            </el-button>
            <div class="logo-container">
                <svg-icon icon-class="logo" class="logo-image" />
                <div class="logo-divider"></div>
                <div class="logo">
                    <span>{{ logoText }}</span>
                </div>
            </div>
            <Topbar />
        </header>
        <div class="layout-main">
            <RouterView />
        </div>
    </section>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { socketIoClientInstance } from '@/data-services/socket-io-1'
import { userConfig } from '@/pages/pinia/user/index'
import { getToken } from '@/utils'
import { i18n } from '@/vue-i18n'
import SvgIcon from '@/components/svg-icon/index.vue'

// 类型定义
interface LoginRepeatData {
    token: string
    userName: string
}

// 常量配置
const CONSTANTS = {
    SOCKET_EVENTS: {
        USER_LOGIN_REPEAT: 'user/login/repeat'
    },
    CONTENT: {
        AREA_NAME: '车间名称XX',
        LOGO_TEXT: 'AI动作防错'
    }
} as const

// 响应式数据
const areaName = CONSTANTS.CONTENT.AREA_NAME
const logoText = CONSTANTS.CONTENT.LOGO_TEXT

// Store 实例
const userConfigStore = userConfig()
const $t = i18n.global.t

// 事件处理函数
const handleUserLoginRepeat = (data: LoginRepeatData | Blob | string) => {
    if (!data || typeof data !== 'object' || data instanceof Blob) {
        return
    }

    const { token, userName } = data as LoginRepeatData

    if (userConfigStore.userName === userName && token === getToken()) {
        userConfigStore.logOut()
    }
}

// 生命周期钩子
onMounted(() => {
    socketIoClientInstance.on(CONSTANTS.SOCKET_EVENTS.USER_LOGIN_REPEAT, handleUserLoginRepeat)
})

onUnmounted(() => {
    socketIoClientInstance.off(CONSTANTS.SOCKET_EVENTS.USER_LOGIN_REPEAT)
})
</script>

<style lang="scss">
// 颜色变量
$primary-bg: #0D1539;
$header-bg: #000;
$border-color: #090B0D;
$text-color: #FFF;
$text-shadow: 0px 2px 6px #1433D2;
$button-bg: #05766E;
$input-bg: #2d2d2d;
$border-input: #627293;
$popper-bg: #24262D;
$hover-bg: #444;

// 尺寸变量
$min-width: 1280px;
$header-height: 70px;
$header-padding: 29px;
$logo-gap: 10px;
$input-height: 40px;
$input-padding: 15px;
$border-radius: 6px;

// 字体变量
$title-font-size: 48px;
$logo-font-size: 27px;
$title-line-height: 46px;
$title-letter-spacing: 6.731px;
$logo-letter-spacing: 0.1rem;

// 混合器
@mixin flex-center {
    display: flex;
    align-items: center;
}

@mixin absolute-center {
    position: absolute;
    left: 48%;
    transform: translateX(-48%);
}

@mixin text-style($font-size, $font-weight: 700) {
    color: $text-color;
    text-shadow: $text-shadow;
    font-size: $font-size;
    font-weight: $font-weight;
}

@mixin input-style {
    height: $input-height;
    padding: 0 $input-padding;
    border-radius: $border-radius;
    border: 1px solid $border-input;
    background: $input-bg;
    box-shadow: none;
}

// 主布局样式
.lix-sh-shizhi-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: $min-width;
    background: #000;

    .layout-top-head {
        flex: 0 0 auto;
        position: relative;
        @include flex-center;
        justify-content: space-between;
        width: 100%;
        min-height: $header-height;
        flex-shrink: 0;
        padding: 0 $header-padding;
        background: $header-bg;
        box-shadow: 0px -1px 0px 0px $border-color inset;
        z-index: 0;

        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -120px;
            height: 200px;
            background-image: url('../assets/images/top_bgc_line.png');
            background-repeat: no-repeat;
            background-position: calc(50% + 5px) bottom;
            background-size: contain;
            pointer-events: none;
            z-index: -10;
        }

        .area-button {
            background-color: $button-bg;
            color: $text-color;
            border: none;
        }

        .logo-container {
            @include absolute-center;
            @include flex-center;
            gap: $logo-gap;
        }

        .logo-image {
            height: 7rem;
            width: 10rem;
            fill: currentColor;
            margin-right: -35px;
        }

        .logo-divider {
            width: 1px;
            height: 1.5rem;
            background-color: #627293;
            margin: 0 15px;
            opacity: 0.6;
        }

        .logo {
            @include text-style($logo-font-size);
            @include flex-center;
            text-align: left;
            letter-spacing: $logo-letter-spacing;

            span {
                display: inline-block;
                margin: 0;
                line-height: 1;
            }
        }

        .title {
            @include text-style($title-font-size);
            font-style: normal;
            line-height: $title-line-height;
            letter-spacing: $title-letter-spacing;
            margin-left: 10px;
        }

        .top-head-right {
            position: absolute;
            top: 0;
            right: 0;
            @include flex-center;
            justify-content: space-between;
            width: 300px;
        }
    }

    .layout-main {
        flex: 1 1;
        overflow: auto;
    }

    // 状态样式
    .xme-image-viewport-layout {
        &.zhuang-tai--is-serving-a-content-source--content-ok {
            color: #184bba;
        }

        &.zhuang-tai--is-serving-a-content-source--no-content {
            color: var(--xme-image-viewport--status-color--when-source-no-content, #333);
        }

        >.shi-ti--info-bar--top {
            color: #eee;
        }
    }
}

// Element UI 组件样式覆盖
.el-select {
    margin-left: 6px;
    border: none;

    .el-select__wrapper {
        background-color: $input-bg;
        padding-right: 10px;
        min-width: 120px;
        user-select: none;
        box-shadow: none;

        .el-input__inner {
            color: #ccc;
            font-size: 12px;
            pointer-events: none;
        }
    }
}

.input-wrap,
.data-gather-picker-date.el-range-editor.el-input__wrapper {
    height: 40px;
    padding: 0 15px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.26, );
    background: #2d2d2d;
    box-shadow: none;

    .el-input__wrapper {
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
}

.el-date-editor .el-range__icon {
    font-size: 20px;
    color: #CADCFF;
}

.el-popper {
    inset: 40.6px auto auto 20px;

    .popper-style {
        background-color: $popper-bg;
        color: $text-color;

        .el-select-dropdown__list {
            .el-select-dropdown__item {
                padding: 0 10px;
                color: $text-color;

                &:hover,
                &.is-hovering,
                &.hover {
                    background-color: $hover-bg;
                }
            }
        }

        .el-popper__arrow::before {
            background-color: transparent;
        }
    }
}

// 响应式设计
@media screen and (max-width: 1700px) {
    .lix-sh-shizhi-layout {
        .layout-top-head {
            .title {
                letter-spacing: 2px;
                font-size: 38px;

                &:lang(en-US) {
                    font-size: 30px;
                }
            }
        }

        .lix-shizhi-area-title {
            font-size: 34px;

            &:lang(en-US) {
                letter-spacing: 2px;
                font-size: 28px;
            }
        }

        .lix-event-wran-main .main-right .right-top .sub-title {
            font-size: 22px;

            &:lang(en-US) {
                font-size: 18px;
            }
        }
    }
}
</style>